<template>
	<view
		class="status-bar"
		:style="{
			height: statusBarHeight,
			position: props.sticky ? 'sticky' : ''
		}"
	>
		<slot></slot>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const props = defineProps({
	height: {
		type: Number,
		required: false,
		default: null
	},
	sticky: {
		type: Boolean,
		required: false,
		default: true
	}
});

const statusBarHeight = ref();

onMounted(() => {
	const systemInfo = uni.getSystemInfoSync();
	statusBarHeight.value = systemInfo.statusBarHeight;

	//  #ifdef MP-WEIXIN
	// 处理胶囊和statusBar的距离问题，会导致闪烁，可以把这个变量存储起来只在第一次获取
	let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	statusBarHeight.value = menuButtonInfo.top + 'px';
	//  #endif
});
</script>

<style lang="scss">
.status-bar {
	height: 20px;
	z-index: 9;
	top: 0;
}
</style>
